.container{position: relative;}

.date{width: 150px;height: 100px;margin: 20px 0 0 15px;font-size: 12px;}
.date>div{float: left;}
.day{font-size: 60px;color: #333}
.yearM{padding-left: 10px;color: #666}
.yearM .week{padding: 15px 2px 17px;}
.date p{font-size: 14px;color: #666;padding: 80px 0 0 0px;}

.boType{position: absolute;left: 0px;bottom: 50px;width: 100%;height: 300px;padding: 5px;color: #999;}
.boType>div{width: 25%;height: 100px;text-align: center;padding: 5px 0 10px;float: left;}
.boType>div i{font-size:26px;padding-bottom:5px;color:snow;width:60px;height:60px;border-radius:50%;line-height:60px;margin-bottom: 5px;}
.boType>div:nth-of-type(1) i{background-color:#f37090; }
.boType>div:nth-of-type(2) i{background-color:skyblue; }
.boType>div:nth-of-type(3) i{background-color:#008080; }
.boType>div:nth-of-type(4) i{background-color:#1E90FF; }
.boType>div:nth-of-type(5) i{background-color:#CD853F; }
.boType>div:nth-of-type(6) i{background-color:#6A5ACD; }
.boType>div:nth-of-type(7) i{background-color:#DC143C; }
.boType>div:nth-of-type(8) i{background-color:#f60; }
.boType>div:last-child{width: 100%;color: #f60;font-size: 40px;padding-top: 30px;}
.boType>div:last-child span:nth-of-type(2){color: #999;}

.foot{position: absolute;left: 0px;bottom: 0;height: 50px;width:100%;border-top: 1px solid #eee;text-align: center;line-height: 40px;font-size: 38px;}
.foot a{text-decoration: none;color: #999;}